<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>供应商管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/css/index.css">
    <!-- 引入组件库 -->
    <script src="/js/vue.js"></script>
    <script src="/js/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background-color: #f5f7fa;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
        }
        .card-container {
            background: #fff;
            border-radius: 6px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
            margin-bottom: 20px;
            overflow: hidden;
        }
        .toolbar {
            padding: 16px 20px;
            border-bottom: 1px solid #f0f0f0;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
        }
        .filter-item {
            margin-right: 10px;
        }
        .table-container {
            padding: 20px;
        }
        .el-table {
            border-radius: 4px;
            overflow: hidden;
        }
        .el-table th {
            background-color: #f7f8fa;
            font-weight: 500;
        }
        .el-table tr:hover > td {
            background-color: #fafafa !important;
        }
        .pagination-container {
            padding: 16px 20px;
            border-top: 1px solid #f0f0f0;
            text-align: right;
        }
        .status-tag {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            line-height: 1;
        }
        .status-normal {
            background-color: #e8f4ea;
            color: #00b42a;
        }
        .status-disabled {
            background-color: #f5f5f5;
            color: #8c8c8c;
        }
        .operation-buttons {
            display: flex;
            gap: 5px;
        }
        .page-title {
            font-size: 18px;
            font-weight: 600;
            color: #1f2d3d;
            margin-bottom: 15px;
            padding-left: 20px;
            padding-top: 10px;
        }
    </style>
</head>
<body>
<div id="app">
    <h3 class="page-title">供应商管理</h3>

    <!-- 主内容卡片 -->
    <div class="card-container">
        <!-- 添加/编辑供应商对话框 -->
        <el-dialog
                :title="dialogTitle"
                :visible.sync="dialogVisible"
                width="50%"
                :close-on-click-modal="false"
                :modal-append-to-body="false"
        >
            <el-form
                    :model="supplierForm"
                    ref="supplierForm"
                    label-width="120px"
                    :rules="formRules"
                    status-icon
            >
                <!-- 隐藏的ID字段，用于修改时传递主键 -->
                <el-form-item prop="id" style="display: none;">
                    <el-input v-model="supplierForm.id"></el-input>
                </el-form-item>

                <!-- 供应商名称（必填） -->
                <el-form-item label="供应商名称" prop="supplierName">
                    <el-input
                            v-model="supplierForm.supplierName"
                            placeholder="请输入供应商全称（如XX贸易有限公司）"
                            maxlength="100"
                    ></el-input>
                </el-form-item>

                <!-- 对接人（必填） -->
                <el-form-item label="对接人" prop="contactPerson">
                    <el-input
                            v-model="supplierForm.contactPerson"
                            placeholder="请输入主要对接人姓名"
                            maxlength="50"
                    ></el-input>
                </el-form-item>

                <!-- 联系人手机号（必填） -->
                <el-form-item label="联系电话" prop="contactPhone">
                    <el-input
                            v-model="supplierForm.contactPhone"
                            placeholder="请输入对接人手机号"
                            maxlength="20"
                    ></el-input>
                </el-form-item>

                <!-- 联系人邮箱（可选） -->
                <el-form-item label="联系邮箱" prop="contactEmail">
                    <el-input
                            v-model="supplierForm.contactEmail"
                            placeholder="请输入对接人邮箱（选填）"
                            type="email"
                            maxlength="100"
                    ></el-input>
                </el-form-item>

                <!-- 地址（可选） -->
                <el-form-item label="供应商地址" prop="address">
                    <el-input
                            v-model="supplierForm.address"
                            placeholder="请输入供应商详细地址（选填）"
                            maxlength="500"
                    ></el-input>
                </el-form-item>

                <!-- 开户银行（可选） -->
                <el-form-item label="开户银行" prop="bankName">
                    <el-input
                            v-model="supplierForm.bankName"
                            placeholder="请输入开户银行（选填）"
                            maxlength="100"
                    ></el-input>
                </el-form-item>

                <!-- 银行账号（可选） -->
                <el-form-item label="银行账号" prop="bankAccount">
                    <el-input
                            v-model="supplierForm.bankAccount"
                            placeholder="请输入银行账号（选填）"
                            maxlength="50"
                    ></el-input>
                </el-form-item>

                <!-- 状态 -->
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="supplierForm.status">
                        <el-radio :label="1">正常</el-radio>
                        <el-radio :label="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitSupplierForm">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 工具栏 -->
        <div class="toolbar">
            <el-button type="primary" @click="showAddDialog" icon="el-icon-plus">
                添加供应商信息
            </el-button>
            <el-input v-model="searchForm.id" placeholder="请输入供应商ID" style="width: 200px;" class="filter-item"></el-input>
            <el-input v-model="searchForm.supplierName" placeholder="请输入供应商名称" style="width: 200px;" class="filter-item"></el-input>
            <el-input v-model="searchForm.contactPerson" placeholder="请输入对接人" style="width: 200px;" class="filter-item"></el-input>
            <el-button type="primary" @click="loadData" icon="el-icon-search">
                查询
            </el-button>
            <el-button @click="resetSearch" icon="el-icon-refresh">
                重置
            </el-button>
        </div>

        <!-- 数据表格 -->
        <div class="table-container">
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%"
                    highlight-current-row
                    :empty-text="tableData.length === 0 ? '暂无供应商数据' : ''">
                <el-table-column prop="id" label="供应商ID" width="100"></el-table-column>
                <el-table-column prop="supplierName" label="供应商名称" width="180"></el-table-column>
                <el-table-column prop="contactPerson" label="对接人" width="120"></el-table-column>
                <el-table-column prop="contactPhone" label="联系电话" width="140"></el-table-column>
                <el-table-column prop="contactEmail" label="联系邮箱" width="180"></el-table-column>
                <el-table-column prop="address" label="地址" min-width="150"></el-table-column>
                <el-table-column prop="bankName" label="开户银行" width="140"></el-table-column>
                <el-table-column prop="bankAccount" label="银行账号" width="160"></el-table-column>
                <el-table-column prop="status" label="状态" width="100">
                    <template slot-scope="{row}">
                        <span :class="row.status === 1 ? 'status-tag status-normal' : 'status-tag status-disabled'">
                            {{ row.status === 1 ? '正常' : '禁用' }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
                <el-table-column prop="updateTime" label="修改时间" width="160"></el-table-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <div class="operation-buttons">
                            <el-button
                                    size="mini"
                                    type="primary"
                                    @click="handleEdit(scope.row)"
                                    icon="el-icon-edit">
                                修改
                            </el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.row)"
                                    icon="el-icon-delete">
                                删除
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页 -->
        <div class="pagination-container">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            dialogVisible: false,
            dialogTitle: '', // 对话框标题，动态变化
            operationType: '', // 操作类型：'add' 或 'edit'
            supplierForm: {
                id: null, // 主键ID（修改时需要）
                supplierName: '', // 供应商名称
                contactPerson: '', // 对接人
                contactPhone: '', // 联系电话
                contactEmail: '', // 联系邮箱
                address: '', // 地址
                bankName: '', // 开户银行
                bankAccount: '', // 银行账号
                status: 1 // 状态 1-正常，0-禁用，默认正常
            },
            // 清理冗余的upplierForm字段
            formRules: {
                supplierName: [
                    { required: true, message: '请输入供应商名称', trigger: 'blur' }
                ],
                contactPerson: [
                    { required: true, message: '请输入对接人姓名', trigger: 'blur' }
                ],
                contactPhone: [
                    { required: true, message: '请输入联系电话', trigger: 'blur' },
                    { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' }
                ],
                contactEmail: [
                    { type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] }
                ],
                status: [
                    { required: true, message: '请选择状态', trigger: 'change' }
                ]
            },
            searchForm: {
                supplierName: '', // 修正搜索字段名
                contactPerson: '',
                id: ''
            },
            tableData: [],
            pageNum: 1,
            pageSize: 10,
            total: 0
        },
        created() {
            this.loadData();
        },
        methods: {
            // 显示添加对话框
            showAddDialog() {
                this.operationType = 'add';
                this.dialogTitle = '添加供应商信息';
                this.dialogVisible = true;
                // 重置表单
                this.$nextTick(() => {
                    if (this.$refs.supplierForm) {
                        this.$refs.supplierForm.resetFields();
                    }
                    this.supplierForm = {
                        id: null,
                        supplierName: '',
                        contactPerson: '',
                        contactPhone: '',
                        contactEmail: '',
                        address: '',
                        bankName: '',
                        bankAccount: '',
                        status: 1 // 默认正常状态
                    };
                });
            },
            // 提交表单
            submitSupplierForm() {
                this.$refs.supplierForm.validate((valid) => {
                    if (valid) {
                        let url = '';
                        // 根据操作类型选择不同的接口
                        if (this.operationType === 'add') {
                            url = '/supplier/insertSupplier';
                        } else {
                            url = '/supplier/updateSupplier';
                        }

                        axios.post(url, this.supplierForm)
                            .then(response => {
                                if (response.data.code === 200) {
                                    this.$message.success(this.operationType === 'add' ? '添加成功' : '修改成功');
                                    this.dialogVisible = false;
                                    this.loadData(); // 刷新列表
                                } else {
                                    this.$message.error(response.data.msg);
                                }
                            })
                            .catch(error => {
                                console.error('操作失败：', error);
                                this.$message.error('系统错误，操作失败');
                            });
                    }
                });
            },
            // 加载数据
            loadData() {
                const params = {
                    pageNo: this.pageNum,
                    pageSize: this.pageSize,
                    supplierName: this.searchForm.supplierName, // 修正参数名
                    contactPerson: this.searchForm.contactPerson,
                    id: this.searchForm.id
                };

                axios.post('/supplier/list', params)
                    .then(response => {
                        if (response.data.code === 200) {
                            this.tableData = response.data.data.list || [];
                            this.total = response.data.data.total || 0;
                        } else {
                            this.$message.error(response.data.msg || '加载数据失败');
                        }
                    })
                    .catch(error => {
                        console.error('请求错误:', error);
                        this.$message.error('系统错误');
                    });
            },
            // 重置搜索条件
            resetSearch() {
                this.searchForm = {
                    supplierName: '',
                    contactPerson: '',
                    id: ''
                };
                this.pageNum = 1;
                this.loadData();
            },
            // 处理页码变化
            handleCurrentChange(val) {
                this.pageNum = val;
                this.loadData();
            },
            // 处理每页条数变化
            handleSizeChange(val) {
                this.pageSize = val;
                this.pageNum = 1; // 重置到第一页
                this.loadData();
            },
            // 处理编辑
            handleEdit(row) {
                this.operationType = 'edit';
                this.dialogTitle = '修改供应商信息';
                this.dialogVisible = true;
                // 加载选中的供应商数据
                this.$nextTick(() => {
                    this.supplierForm = {
                        id: row.id,
                        supplierName: row.supplierName,
                        contactPerson: row.contactPerson,
                        contactPhone: row.contactPhone,
                        contactEmail: row.contactEmail,
                        address: row.address,
                        bankName: row.bankName,
                        bankAccount: row.bankAccount,
                        status: row.status
                    };
                });
            },
            // 处理删除
            handleDelete(row) {
                this.$confirm('确认删除该供应商信息吗？', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'error'
                }).then(() => {
                    axios.delete('/supplier/delete/' + row.id)
                        .then(response => {
                            if (response.data.code === 200) {
                                this.$message.success('删除成功');
                                this.loadData();
                            } else {
                                this.$message.error(response.data.msg);
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            this.$message.error('系统错误');
                        });
                }).catch(() => {
                    this.$message.info('已取消删除');
                });
            }
        }
    });
</script>
</body>
</html>